<template>
  <el-row >
    <el-button type="primary" @click="exportJSON()">下载编排JSON</el-button>
  </el-row>
  <el-row >
    <el-col :span="8"><div id="stencil"/></el-col>
    <el-col :span="16"><div id="container"/>
      <svrNodeEdit :dialogVisible=dialogVisible :nodeDataMap="nodeDataMap" @dialogNodeClose="dialogNodeClose"></svrNodeEdit>
      <funcNodeEdit :dialogVisible=dialogFuncVisible :nodeDataMap="funcDataMap" @dialogFuncClose="dialogFuncClose"></funcNodeEdit>
      <scriptNodeEdit :dialogVisible=dialogScriptVisible :nodeDataMap="scriptDataMap" @dialogScriptClose="dialogScriptClose"></scriptNodeEdit>
    </el-col>
  </el-row>   

</template>

<script lang="ts">
import {   Graph, Addon, Shape } from '@antv/x6';
import { graphinit, stencilinit } from '../x6/graphinit'
const { Rect, Circle } = Shape
import axios from 'axios'
import { post } from '../http/http'
import svrNodeEdit from './svrNodeEdit.vue'
import funcNodeEdit from './funcNodeEdit.vue'
import scriptNodeEdit from './scriptNodeEdit.vue'
import FileSaver from 'file-saver'

export default {
    name: 'index02',
    props: {
      postparam:{
        type:String,
        default:"{processName:}",
      },
    },
    data () {
        return { 
          // 节点
          datas :{
            nodes: [
              {
                id: 'node1', // String，可选，节点的唯一标识
                x: 0,       // Number，必选，节点位置的 x 值
                y: 0,       // Number，必选，节点位置的 y 值
                width: 80,   // Number，可选，节点大小的 width 值
                height: 40,  // Number，可选，节点大小的 height 值
                label: 'hello', // String，节点标签
                data: {
                  "process": {
                    "name": "collatImageApproveImpl",
                    "overtime": "8000",
                    "version": "0.1",
                  }
                }
              },
              {
                id: 'node2', // String，节点的唯一标识
                shape: 'ellipse',
                x: 160,      // Number，必选，节点位置的 x 值
                y: 180,      // Number，必选，节点位置的 y 值
                width: 80,   // Number，可选，节点大小的 width 值
                height: 40,  // Number，可选，节点大小的 height 值
                label: '123', // String，节点标签
              },
            ],
            // 边
            edges: [
              {
                source: 'node1', // String，必须，起始节点 id
                target: 'node2', // String，必须，目标节点 id
              },
            ],
          },
          postReq:this.postparam,
          process:[],
          activity:[],
          graph:Graph,
          dialogVisible:false,
          dialogFuncVisible:false,
          dialogScriptVisible:false,
          nodeDataMap: new Map<String, Object>(),
          funcDataMap: new Map<String, Object>(),
          scriptDataMap: new Map<String, Object>(),
        }
    },
    components:{
      svrNodeEdit,
      funcNodeEdit,
      scriptNodeEdit,
    },
    methods: {
      exportJSON () {
        // 将json转换成字符串
        const data = JSON.stringify(this.process)
        const blob = new Blob([data], {type: ''})
        FileSaver.saveAs(blob, this.process['name']+'.json')
      },
      dialogNodeClose(){
        this.dialogVisible = false
      },
      dialogFuncClose(){
        this.dialogFuncVisible = false
      },
      dialogScriptClose(){
        this.dialogScriptVisible = false
      },
      popupNode(node) {  
        const kind = node.getAttrs()['kind']['type']
        const nodeData = node.getData()
        console.log(nodeData)
        //console.log(this.process)
        if (kind == 'svr'){
          // pathInfo = this.$router.resolve({
          //   name:'svrNodeEdit',
          //   params:{
          //       nodeName:'123'
          //   }
          // })
          this.dialogVisible = true
          this.nodeDataMap.set("nodeData",nodeData)
        }
        if (kind == 'func') {
          const cls = node.getAttrs()['kind']['cls']
          if( cls == 'Start') {
            this.dialogFuncVisible = true
            this.funcDataMap.set("nodeData",nodeData)
          }
          if( cls == 'Script') {
            this.dialogScriptVisible = true
            this.scriptDataMap.set("nodeData",nodeData)
          }

        }
        //window.open(pathInfo.href, '_blank','width=725,height=450,toolbar=no,scrollbars=no,menubar=no,screenX=240,screenY=100');
      },
      async getProcess() {
            const url = "/api/getProcess";
            const res = await post(url, this.postReq);
            console.log(res)
            this.process = res;

            graphinit(this.graph ,this.process);
          },
      async getAllActivity() {
            const url = "/api/getAllActivity";
            const res = await post(url, "{}");
            console.log(res)
            this.activity = res;

            stencilinit(this.graph ,this.activity);
          },
          
    },
    mounted () {

      this.graph = new Graph({
        container: document.getElementById('container') as HTMLElement,
        width: 800,
        height: 600,
        snapline: true,
        background: {
          color: '#fffbe6', // 设置画布背景颜色
        },
        grid: {
          size: 10,      // 网格大小 10px
          visible: true, // 渲染网格背景
        },
        translating: {
          restrict: true
        },
        });

        this.graph.on('node:dblclick', ({ e, x, y, node, view }) => {
            this.popupNode(node)
         })

      // axios.post('/api/getProcess',this.postReq).then(response => {
      //   this.process = response.data
      //   console.log('process>>',this.process)
      // })
      // .catch(function (error) { // 请求失败处理
      //   console.log(error);
      // });
      this.getProcess()
      this.getAllActivity()


    },
}
</script>

<style scoped>
.radius-small {
  border: 1px solid var(--el-border-color);
  border-radius: --el-border-radius-small;
  margin-top: 20px;
}
</style>
